<template>
  <div class="path-index container">
    <Header></Header>
    <section>
      <ul>
        <li @click="goList">
          <div>
            <span>张三</span>
            <span>18511773322</span>
          </div>
          <div>
            <span class="active">[默认]</span>
            <span>天津 天津市 和平区 3434343 </span>
          </div>
        </li>
      </ul>
      <div class="add-path" @click="goList">添加地址</div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Header from "@/components/path/Header.vue";
import Tabbar from "@/components/common/Tabbar.vue";
export default {
  components: {
    Header,
    Tabbar,
  },
  methods: {
    goList() {
      this.$router.push({
        name: "path-list",
      });
    },
  },
};
</script>

<style lang='scss' scoped>
section {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f7f7f7;
  ul {
    width: 100%;
    li {
      padding: 0.266666rem 0.4rem;
      margin: 0.16rem 0;
      background-color: #ffffff;
      span {
        padding-right: 0.4rem;
        font-size: 0.426666rem;
      }
      .active {
        color: #6cf;
      }
    }
  }
  .add-path {
    margin-top: 0.8rem;
    width: 3.2rem;
    line-height: 1.066666rem;
    font-size: 0.48rem;
    text-align: center;
    color: #ffffff;
    background-color: #6cf;
    border-radius: 6px;
  }
}
::v-deep .tabbar {
  border-top: 2px solid #ccc;
}
</style>
